<template>
  <div class="q-ma-md">
    <t-scroll-area
      :thumb-style="thumbStyle"
      :content-style="contentStyle"
      :content-active-style="contentActiveStyle"
      style="height: 200px; max-width: 300px"
    >
      <div v-for="n in 100" :key="n" class="q-pa-xs">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </t-scroll-area>
  </div>
</template>

<script>
  export default {
    setup() {
      return {
        contentStyle: {
          backgroundColor: 'rgba(0,0,0,0.02)',
          color: '#555',
        },

        contentActiveStyle: {
          backgroundColor: '#eee',
          color: 'black',
        },

        thumbStyle: {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#027be3',
          width: '5px',
          opacity: '0.75',
        },
      };
    },
  };
</script>
